<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>分词器控制</title>
  <link rel="stylesheet" href="./lib/elementui.css" />
</head>

<body>
  <div id="app_split">
    <a @click.prevent="openTip()"><i class="fa fa-edit"></i> 快捷编辑</a>

    <!-- 装配提示词 弹窗 -->
    <el-dialog :visible.sync="selectVisible" width="1200px">
      <!-- 头部控制 -->
      <div slot="title">
        <h2 style="font-size: 16px; color: #888;font-weight: bolder;margin-top: 20px;margin-left: 15px;">{{ title }}
        </h2>
      </div>
      <!-- 中间内容 -->
      <div style="margin-top: -40px; display: flex;justify-content:flex-start;">
        <el-input type="textarea" :rows="25" placeholder="请输入内容" v-model="splitWords"
          style="width: 300px;margin-left: 10px;" @input="changeInputWords"></el-input>
        <div style="width: 810px;border-radius: 10px;padding: 20px;margin-left: 0;margin-top: -58px;">

          <el-tabs>
            <el-tab-pane label="权重分组模式">
              <div style="display: flex;flex-wrap: wrap;">
                <div style="color: #888;width: 700px;display: flex;font-weight: bolder;margin-top: 10px;">
                  <div style="background-color: #e6e6e6; width: 6px;border-radius: 3px; margin-right: 6px;"></div>
                  <div
                    style="background-color: #e6e6e6;display: inline-block;padding: 5px 15px; border-radius: 5px; font-size: 14px;line-height: 18px;">
                    有权重
                  </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
                  <div v-for="(item, index) in splitObjs" :key="'a'+index">
                    <template v-if="item.leavel !== 0">
                      <div
                        style="background-color: #636363;color: #fff;font-size: 12px;margin-left:12px;margin-top: 10px;padding: 0 10px;border-radius: 5px;line-height: 20px;display: flex;align-items: center;padding-right: 0;cursor: pointer;"
                        @click="removeItem(item.index)" v-if="item.show">
                        <span>{{ item.en }} </span>
                        <span
                          style="background-color: #fff;font-size: 10px;color: #666;height: 12px; line-height: 12px;padding: 2px 5px; border-radius: 3px;margin-left: 10px;text-align: center;">{{
                          item.leavel }}</span>
                        <span
                          style="background-color: #82b069; display: inline-block;padding: 5px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;margin-left: 10px;line-height: 20px;">{{
                          item.zh }}</span>
                      </div>
                      <div
                        style="background-color: #eee;color: #fff;font-size: 12px;margin-left:12px;margin-top: 10px;padding: 0 10px;border-radius: 5px;line-height: 20px;display: flex;align-items: center;padding-right: 0;cursor: pointer;"
                        @click="removeItem(item.index)" v-else>
                        <span>{{ item.en }} </span>
                        <span
                          style="background-color: #eee;font-size: 10px;height: 12px; line-height: 12px;padding: 2px 5px; border-radius: 3px;margin-left: 10px;text-align: center;">{{
                          item.leavel }}</span>
                        <span
                          style="background-color: #eee; display: inline-block;padding: 5px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;margin-left: 10px;line-height: 20px;">{{
                          item.zh }}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>

              <div style="display: flex;flex-wrap: wrap;margin-top: 30px;">
                <div style="color: #888;width: 700px;display: flex;font-weight: bolder;">
                  <div style="background-color: #e6e6e6; width: 6px;border-radius: 3px; margin-right: 6px;"></div>
                  <div
                    style="background-color: #e6e6e6;display: inline-block;padding: 5px 15px; border-radius: 5px; font-size: 14px;line-height: 18px;">
                    无权重
                  </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
                  <div v-for="(item, index) in splitObjs" :key="'b'+index">
                    <template v-if="item.leavel === 0">
                      <div
                        style="background-color: #636363;color: #fff;font-size: 12px;margin-left:12px;margin-top: 10px;padding: 0 10px;border-radius: 5px;line-height: 20px;display: flex;align-items: center;padding-right: 0;cursor: pointer;"
                        @click="removeItem(item.index)" v-if="item.show">
                        <span>{{ item.en }} </span>
                        <span
                          style="background-color: #82b069; display: inline-block;padding: 5px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;margin-left: 10px;line-height: 20px;">{{
                          item.zh }}</span>
                      </div>
                      <div
                        style="background-color: #eee;color: #fff;font-size: 12px;margin-left:12px;margin-top: 10px;padding: 0 10px;border-radius: 5px;line-height: 20px;display: flex;align-items: center;padding-right: 0;cursor: pointer;"
                        @click="removeItem(item.index)" v-else>
                        <span>{{ item.en }} </span>
                        <span
                          style="background-color: #eee; display: inline-block;padding: 5px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;margin-left: 10px;line-height: 20px;">{{
                          item.zh }}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>

            </el-tab-pane>

            <el-tab-pane label="拆分比对分组">

              <div style="display: flex;flex-wrap: wrap;">
                <div style="color: #888;width: 700px;display: flex;font-weight: bolder;margin-top: 10px;">
                  <div style="background-color: #e6e6e6; width: 6px;border-radius: 3px; margin-right: 6px;"></div>
                  <div
                    style="background-color: #e6e6e6;display: inline-block;padding: 5px 15px; border-radius: 5px; font-size: 14px;line-height: 18px;">
                    分类组
                  </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;margin-top: 0px;">
                  <div v-for="(item, index) in splitObjs" :key="'d'+index">
                    <template v-if="item.find !== ''">
                      <div
                        style="background-color: #636363;color: #fff;font-size: 12px;margin-left:12px;margin-top: 10px;border-radius: 5px;height: 24px;line-height: 24px;display: flex;align-items: center;cursor: pointer;"
                        @click="removeItem(item.index)" v-if="item.show">
                        <span style="margin-left: 10px;">{{ item.en }} </span>
                        <span
                          style="background-color: #82b069; display: inline-block;padding: 0 10px;margin-left: 10px;line-height: 24px;">{{
                          item.zh }}</span>
                        <span
                          style="background-color: #41a8a2;display: inline-block;padding: 0 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;line-height: 24px;">{{
                          item.find.cname }}</span>
                      </div>
                      <div
                        style="background-color: #ccc;color: #fff;font-size: 12px;margin-left:12px;margin-top: 10px;border-radius: 5px;height: 24px;line-height: 24px;display: flex;align-items: center;cursor: pointer;"
                        @click="removeItem(item.index)" v-else>
                        <span style="margin-left: 10px;">{{ item.en }} </span>
                        <span
                          style="background-color: #ccc; display: inline-block;padding: 0 10px;margin-left: 10px;line-height: 24px;">{{
                          item.zh }}</span>
                        <span
                          style="background-color: #ccc;display: inline-block;padding: 0 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;line-height: 24px;">{{
                          item.find.cname }}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>

              <div style="margin-top: 30px;display: flex;flex-wrap: wrap;">
                <div style="color: #888;width: 700px;display: flex;font-weight: bolder;margin-top: 10px;">
                  <div style="background-color: #e6e6e6; width: 6px;border-radius: 3px; margin-right: 6px;"></div>
                  <div
                    style="background-color: #e6e6e6;display: inline-block;padding: 5px 15px; border-radius: 5px; font-size: 14px;line-height: 18px;">
                    普通组
                  </div>
                </div>
                <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
                  <div v-for="(item, index) in splitObjs" :key="'b'+index">
                    <template v-if="item.find === '' ">
                      <div
                        style="background-color: #636363;color: #fff;font-size: 12px;margin-left:12px;margin-top: 10px;padding: 0 10px;border-radius: 5px;line-height: 20px;display: flex;align-items: center;padding-right: 0;cursor: pointer;"
                        @click="removeItem(item.index)" v-if="item.show">
                        <span>{{ item.en }} </span>
                        <span
                          style="background-color: #82b069; display: inline-block;padding: 5px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;margin-left: 10px;line-height: 20px;">{{
                          item.zh }}</span>
                      </div>
                      <div
                        style="background-color: #eee;color: #fff;font-size: 12px;margin-left:12px;margin-top: 10px;padding: 0 10px;border-radius: 5px;line-height: 20px;display: flex;align-items: center;padding-right: 0;cursor: pointer;"
                        @click="removeItem(item.index)" v-else>
                        <span>{{ item.en }} </span>
                        <span
                          style="background-color: #eee; display: inline-block;padding: 5px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;margin-left: 10px;line-height: 20px;">{{
                          item.zh }}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </div>


            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 底部元素 -->
      <div style="display: flex; justify-content: right;margin-top: 0px;">
        <el-button @click="selectVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 认</el-button>
      </div>
    </el-dialog>

  </div>
</body>

</html>
<!-- 导包，导入相关框架依赖及基础数据结构 -->
<script src="./lib/vue.js"></script>
<script src="./lib/elementui.js"></script>
<script src="./lib/axios.js"></script>
<script src="./lib/dataList.js"></script>
<script src="./lib/dataListOther.js"></script>
<script>
  // 格式化 POST 数据
  const getPostParams = (obj) => {
    const params = new URLSearchParams();
    for (let key in obj) {
      params.append(key, obj[key]);
    }
    return params;
  }

  new Vue({
    el: "#app_split",
    data() {
      return {
        // 控制提示词选择器弹框
        selectVisible: true,
        // 待操作的标题，需要注入数据
        title: 'A Test Title For You',
        // 待操作的 分词（需要从系统中使用 PHP 注入数据）
        splitWords: `Electric Arc::2,David Hockney,Edgar Degas::-2,Macro::1,moon background::-1  --seed 2 --v 5 --q 2 --ar 16:9 --stop 100 --iw 2 --s 20000 --c 100 --no momo --no haha`,
        // 数据清洗后的 词对象
        splitObjs: [],
        // 计时器，只有上次请求成功后，并且两次请求间隔不能小于 500ms，才会进行下一次请求
        requestStatus: false
      }
    },
    mounted() {
      this.getSplitObj();
    },
    methods: {
      // 打开弹窗
      openTip() {
        this.selectVisible = true;
      },
      // 当前用户发生了修改行为，并失去了焦点
      changeInputWords() {
        if (!this.requestStatus) {
          this.requestStatus = true;
          const timer = setTimeout(() => {
            clearTimeout(timer);
            this.getSplitObj();
            this.requestStatus = false;
          }, 1000)
        }
      },
      // 在基础数据源中查找 当前分词 是否存在
      findPathFromDataList(dataList, enkeyword, cnkeyword) {
        let path = []
        for (let i = 0; i < dataList.length; i++) {
          if (path.length === 3) break;
          for (let j = 0; j < dataList[i].children.length; j++) {
            if (path.length === 3) break;
            for (let k = 0; k < dataList[i].children[j].children.length; k++) {
              if (dataList[i].children[j].children[k].tname.toLowerCase() === enkeyword.toLowerCase() || dataList[i].children[j].children[k].cname === cnkeyword) {
                path = [i, j, k];
                break;
              }
            }
          }
        }
        if (path.length === 3) {
          return dataList[path[0]]
        } else {
          return ''
        }
      },
      // 获取编译解析后的数据格式
      async getSplitObj() {
        // 英文切割
        let enarr = this.splitWords.split(/，|,|——|--|、|\.|。|!|！|\?|？/).filter(item => item !== '')
        console.log(enarr);
        // 组合现有各个维度数据
        const allDataList = [...dataList, ...dataListOther];

        // 组合关键逻辑
        this.splitObjs = [];
        enarr.forEach(async (item, index) => {
          if (!item) return;
          // 中文翻译及切割
          let res = await axios.post("https://ai.tevo.online/app/apiv1/translate", getPostParams({
            txt: item,
            from: 'en',
            to: 'zh'
          }))
          let citem = res.data.data.result

          if (item.indexOf("::") > -1) {
            this.splitObjs.push({
              index,
              en: item.split("::")[0].trim(),
              zh: citem.split("::")[0].trim(),
              show: true,
              leavel: item.split("::")[1].trim(),
              find: this.findPathFromDataList(allDataList, item.split("::")[0].trim(), citem.split("::")[0].trim())
            })
          } else {
            this.splitObjs.push({
              index,
              en: item.trim(),
              zh: citem.trim(),
              show: true,
              leavel: 0,
              find: this.findPathFromDataList(allDataList, item.trim(), citem.trim())
            })
          }
        })
        this.requestStatus = false;
        console.log(this.splitObjs);
      },
      // 删除一个分词
      removeItem(index) {
        let findIndex = this.splitObjs.findIndex(item => item.index === index);
        console.log(findIndex);
        this.splitObjs[findIndex].show = !this.splitObjs[findIndex].show;
        this.joinItems();
      },

      // 组合分词
      joinItems() {
        let str = ''
        this.splitObjs.forEach(item => {
          if (item.show) {
            if (item.leavel !== 0) {
              str += item.en + '::' + item.leavel + ','
            } else {
              str += item.en + ','
            }
          }
        })
        this.splitWords = str.slice(0, -1);;
      },

      confirm() {
        this.selectVisible = false;
        // var vals = $("#prompts_style").val().split(",").map(v => $.trim(v)).filter(v => !!v) || [];
        // this.chosedTips.forEach(v => {
        //   if (v.tname && vals.indexOf(v.tname) === -1) {
        //     vals.push(v.tname);
        //   }
        // });
        // $("#prompts_style").val(vals.join(","));
      }
    }

  });
</script>